<template>
	<view class="container">
		<!-- 搜索板块 -->
		<tui-navigation-bar class="navigationBar" :isOpacity="false" >
			<view class="tui-content-box">
				<view class="tui-search-box" @click="toSearchIndex">
					<tui-icon name="search-2" :size="18" color="#bfbfbf"></tui-icon>
					<view class="tui-search-text">请输入搜索关键字</view>
				</view>
			</view>
		</tui-navigation-bar>
		<!-- <view>
			<img src="/static/img/index_slices/home_bg.png" alt="">
		</view> -->

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper class="carousel" circular indicator-dots>
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.url"/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="toNavList('/pages/user/Yuncang')">
				<image src="../../static/img/index_slices/homedistributio1.png"></image>
				<text>云仓</text>
			</view>
			<view class="cate-item" @click="toNavList('/pages/distribution/distribution')">
				<image src="../../static/img/index_slices/homedistributio2.png"></image>
				<text>分销中心</text>
			</view>
			<view class="cate-item" @click="toNavList('/pages/user/dailyTasks')">
				<image src="../../static/img/index_slices/homedistributio3.png"></image>
				<text>每日任务</text>
			</view>
			<view class="cate-item" @click="toNavList('/pages/user/invitation')">
				<image src="../../static/img/index_slices/homedistributio4.png"></image>
				<text>邀请码</text>
			</view>
			<!-- <view class="cate-item" @click="toTabBar('/pages/material/Material')">
				<image src="/static/img/index_slices/home_matter.png"></image>
				<text>素材中心</text>
			</view> -->
			<!-- <view class="cate-item" @click="toTabBar('/pages/business/business')">
				<image src="/static/img/index_slices/home_business.png"></image>
				<text>商学院</text>
			</view> -->
		</view>

		<!-- 快讯板块 -->
		<view class="kuaixun">
			<view class="kuaixun_log">
				<image src="../../static/img/index_slices/home_flash.png"></image>
			</view>
			<view class="kuaixun_text">
				<view class="kuaixun_one" @tap="tonewsInfo(item.materialCategerId)" v-for="(item,index) in selectList" :key="index">
					<view class="kuaixun_txt">{{item.titile}}</view>
				</view>
				<view style="width: 50upx; height: 50upx; position: absolute;top: -24upx;right: -20upx;">
					<image style="width: 100%;height:100%;" src="../../static/img/home/home_new.png" mode=""></image>
				</view>
			</view>
			
		</view>

		<!-- 商品切换 -->
		<!-- <tui-sticky :scrollTop="scrollTop" stickyHeight="80rpx">
			<template v-slot:header>
				<view class="f_header">
					<view class="tit_box">
						<text class="tit" :class="{current: filterIndex === 0}" >热卖商品</text>
					</view>
				</view>
			</template>
		</tui-sticky> -->
		
		
		<view class="imgHeHuo" @click="navtoFriends()">
			<image class="imgBannerOne" src="../../static/img/index_slices/home_task_banner.png" alt=""></image>
		</view>
		<view class="imgHeHuo" @click="recruitingPartners()">
			<image class="imgBannerTwo" src="../../static/img/index_slices/home_partner_banner.png" alt=""></image>
		</view>
		<view class="imgHeHuo" @click="photography()">
			<image class="imgBannerThree" src="../../static/img/index_slices/home_fodder_banner.png" alt=""></image>
		</view>
		
		
		
		
		
		<!-- 热卖商品 -->
		
		<view class="f_header">
			<view class="tit_box">
				<img src="../../static/img/index_slices/home_indicate.png" alt="">
				<text class="tit">热卖商品</text>
			</view>
		</view>
		

		<!-- 商品列表 -->
		<view class="guess-section">
			<view class="guess-item" v-for="(item, index) in goodsList" :key="index" @click="navToDetailPage(item.id)">
				<view class="image-wrapper">
					<image :src="item.picUrl" mode="aspectFill"></image>
				</view>
				<view class="name-wrapper">
					<!-- <image v-show="item.isHot" class="image-wrapper" src="../../static/img/index_slices/home_hot_tab.png" mode=""></image> -->
					<!-- 加clamp class名字 单行文本隐藏  -->
					<text class="title">{{item.name}}</text>
				</view>
				<view class="price_mon">
					<view>
						<text class="price">￥{{item.retailPrice}}</text>
						<text class="price_del">￥{{item.counterPrice}}</text>
					</view>
					<text class="Sold">已售{{item.salesNum}}件</text>
				</view>
			</view>
		</view>

		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="total" type="primary"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	
	export default {
		
		data() {
			return {
				isFixed: false,
				scrollTop: 0,
				stickyTop: uni.upx2px(80),
				carouselList: [],		//轮播图
				selectList:[],          //钱颜快讯
				hotimg:"../../static/img/index_slices/home_hot.png",
				newimg:"../../static/img/index_slices/home_new.png",
				filterIndex: 0,			//商品切换
				goodsList: [],			//商品列表
				total:"",							//商品总数	
				page:"",							//几页
				pages:"",							//一共多少页
				limit:"10",							//一页十条
				loadding: false,					//加载
				pullUpOn: true						//没有数据
			};
		},

		// 页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},

		// 页面加载
		onLoad() {
			this.loadData();
			this.adCarousel();
			this.qianyanselectList();
			this.stickyTop += 40;
		},
		
		computed: {
			...mapState(['hasLogin'])
		},
		
		methods: {
			// 搜索跳转
			toSearchIndex() {
				uni.navigateTo({
					url: "/pages/search/index"
				})
			},
			
			// 轮播图
			adCarousel(){
				this.tui.request(
					'/app/home/adCarousel',
					'GET', 
					{
						
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.carouselList = res.data.list;
					}
				}).catch(err => {
					console.log(err)
				});
			},
			
			// 分类跳转
			toNavList: function(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			
			toTabBar:function(url){
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.switchTab({
					url
				})
			},
			
			// 钱颜快讯
			qianyanselectList(){
				this.tui.request(
					'/app/material/qianyanNewsList',
					'GET', 
					{
						"materialType":3,
						"index":1,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.selectList = res.data.list;
					}
				}).catch(err => {
					console.log(err)
				});
			},
			
			// 快讯跳转
			tonewsInfo: function(itemid) {
				uni.navigateTo({
					url: "/pages/newsFlash/newsFlash?id=" + itemid,
				})
			},
			
			// 摄影团队
			photography:function(){
				uni.navigateTo({
					url: "/pages/photography/photography",
				})
			},
			
			//邀请好友
			navtoFriends:function(){
				uni.navigateTo({
					url: "/pages/Invitefriends/Invitefriends",
				})
			},
			
			//招募合伙人
			recruitingPartners:function(){
				this.tui.toast("功能开发中")
				
				// let url = "http://app.maotuoxianzi.com/login"
				// location.href = url;
			},
			
			// 商品切换
			tabClick(index) {
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
			},
			
			// 下拉刷新
			onPullDownRefresh: function() {
				this.page = 1;
				this.pullUpOn = true;
				this.loadding = false;
				// 加载商品
				this.tui.request(
					'/app/goods/list',
					'GET', 
					{
						page:this.page,
						limit:this.limit,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.total = res.data.total;
						this.page = res.data.page;
						this.pages = res.data.pages;
						this.goodsList = res.data.list;
					}
				}).catch(err => {
					console.log(err)
				});
				
				//轮播图
				this.adCarousel();
				//钱颜快讯
				this.qianyanselectList();
				//停止下拉刷新
				uni.stopPullDownRefresh();
			},
			
			// 上拉加载
			onReachBottom: function() {
				console.log(this.page)
				if (!this.pullUpOn) {
					return;
				}
				this.loadding = true;
				if (this.page == this.pages) {
					this.loadding = false;
					this.pullUpOn = false
				} else {
					++this.page;
					this.loadData();
					this.loadding = false
				}
			},
			
			// 加载商品
			loadData() {
				this.tui.request(
					'/app/goods/list',
					'GET', 
					{
						page:this.page,
						limit:this.limit,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.total = res.data.total;
						this.page = res.data.page;
						this.pages = res.data.pages;
						
						let worksList = res.data.list;
						worksList.forEach(item => {
							this.goodsList.push(item);
						});						
					}
				}).catch(err => {
					console.log(err)
				});
				
			},

			// 详情页
			navToDetailPage(item) {
				let id = item;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	
	.imgBannerOne{
		width: 90%;
		height: 220upx;
		margin: 0 auto;
		display: block;
	}
	.imgBannerTwo{
		width: 90%;
		height: 332upx;
		margin: 0 auto;
		display: block;
	}
	.imgBannerThree{
		width: 90%;
		height: 322upx;
		margin: 0 auto;
		display: block;
	}
	
	

	/*navigation-bar*/
	.tui-content-box {
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-search-box {
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		border-radius: 18px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, .2);
	}

	.tui-search-text {
		color: #ffffff;
		padding-left: 10rpx;
	}

	.navigationBar{
		background: url(../../static/img/home/homebg.png) no-repeat;
		background-size: 100% 360upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		// margin-top: 88upx;
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		background: url(../../static/img/home/homebg.png) no-repeat;
		background-size: 100% 360upx;
		padding-top: 200upx;
		padding-bottom: 40upx;
		
		.carousel {
			width: 90%;
			margin: 0 auto;
			height: 350upx;
		
			.carousel-item {
				width: 100%;
				height: 100%;
				border-radius: 20upx;
				overflow: hidden;
			}
		
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		uni-swiper-dot {
			width: 40px !important;
			height: 4px !important;
			border-radius: inherit !important;
			background-color: #cccccc !important;
		}

	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 22upx 22upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 64upx;
			height: 68upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			opacity: .7;
		}
	}

	/* 快讯 */
	.kuaixun {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		padding-top: 10px;
		padding-bottom: 10px;
		background: #ffffff;
		margin-top: 10px;
		margin-bottom: 16upx;

		.kuaixun_log {
			width: 15%;
			margin-left: 20px;
			
			image {
				width: 40px;
				height: 40px;
			}
		}

		.kuaixun_text {
			width: 80%;
			margin-right: 20upx;
			position: relative;
			padding-right: 15px;
		}

		.kuaixun_one {
			display: flex;
			align-items: center;
			color: #666666;
			
			image {
				width: 60upx;
				height: 30upx;
			}
			
			.kuaixun_txt {
				padding-left: 5px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			
		}
	}
	
	.imgHeHuo{
		width: 100%;
		height: 100%;
		margin: 0 auto;
		
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		
		
		img{
			width: 92%;
			height: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	
	
	
	

	/*商品切换*/
	.is_fixed {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height);
		/* #endif */
		z-index: 999;
	}

	.f_header {
		display: flex;
		align-items: center;
		height: 45px;
		padding: 6upx 30upx 8upx;
		background: #fff;
	}

	.tit_box {
		padding-right: 15px;
		display: flex;
		align-items: center;
	}

	.tit {
		font-size: 15px;
		font-weight: 600;
		color: #333333;
		padding-left: 10upx;
	}

	.current {
		font-size: 15px;
		font-weight: 600;
		color: #333333;
		line-height: 1.3;
		border-bottom: 2px solid #6E609E;
	}
	
	
	
	
	

	/* 商品列表 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30upx;
		background: #fff;

		.guess-item {
			// display: flex;
			// flex-direction: column;
			width: 47%;
			padding: 10upx;
			margin-bottom: 20upx;
			border:2upx solid rgba(245,245,245,1);
			border-radius:10upx;
			// &:nth-child(2n+1) {
			// 	margin-right: 4%;
			// }
		}

		.image-wrapper {
			// width: 123px;
			height: 125px;
			border-radius: 3px;
			overflow: hidden;
			// margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.name-wrapper{
			line-height:40upx;
			
			image {
				width: 60upx;
				height: 30upx;
				margin-right: 10upx;
			}
			
			.title {
				font-size:32upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(51,51,51,1);				
				display: block;
				width: 150px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		
		
		
		.price_mon {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 16px;
				color: #D14798;
				line-height: 1;
				font-weight: 500;
			}

			.price_del {
				color: #ccc;
				font-size: 12px;
				text-decoration: line-through;
			}

			.Sold {
				color: #ccc;
				font-size: 12px;
			}
		}
	}
</style>
